import React, { Suspense } from 'react'
import { NavLink, Outlet } from 'react-router-dom'

import './userCenter.css'
import UserInfo from '../../components/UserInfo'

export default function UserCenter() {

    function calClassName({ isActive }) {
        return isActive ? 'isActive' : ""
    }

    return (
        <div className={'user-center'}>
            <UserInfo />
            <div className={'user-pannel'}>
                <div className={'pannel-nav'}>
                    <NavLink to={'basicinfo'} className={calClassName}>基本信息</NavLink>
                    <NavLink to={'releasegame'} className={calClassName}>发布比赛</NavLink>
                    <NavLink to={'signupgame'} className={calClassName}>报名比赛</NavLink>
                </div>
                <div className={'pannel-body'}>
                    <Suspense fallback={'loading'}>
                        <Outlet />
                    </Suspense>
                </div>
            </div>
        </div>
    )
}